<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'activityTime'">
          {{ record['startTime'] }}-<br />{{ record['endTime'] }}
        </template>
        <template v-else-if="column.key === 'ticketPrice'">
          <template v-if="record['maxPrice']">
            <template v-if="record['minPrice'] === record['maxPrice']">
              {{ record['minPrice'] }}
            </template>
            <template v-else> {{ record['minPrice'] }}~{{ record['maxPrice'] }} </template>
          </template>
          <template v-else> 0 </template>
        </template>

        <template v-else-if="column.key === 'publishStatus'">
          <Tag :color="getPublishStatusText(record['publishStatus']).dictType">
            {{ getPublishStatusText(record['publishStatus']).dictLabel }}
          </Tag>
        </template>
        <template v-else-if="column.key === 'activityStatus'">
          <Badge
            :status="getActivityStatusText(record['activityStatus']).dictType"
            :text="getActivityStatusText(record['activityStatus']).dictLabel"
          />
        </template>

        <template v-else-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '数据中心',
                onClick: () =>
                  router.push({
                    name: 'activityDetail',
                    params: {
                      id: record.id,
                    },
                  }),
              },
              {
                label: '活动详情',
                onClick: () => openQrCodeModal(record),
              },
            ]"
        /></template>
      </template>
    </BasicTable>
    <BasicModal
      @register="register"
      :showCancelBtn="false"
      :showOkBtn="false"
      title="活动详情"
      width="800px"
    >
      <div class="flex flex-col items-center gap-24px">
        <div>微信扫码查看活动详情</div>
        <Image :src="qrCodeUrl" width="280px" height="280px" />
        <Button
          @click="downloadByUrl({ url: qrCodeUrl, fileName: '活动二维码.jpg' })"
          type="primary"
          ghost
        >
          下载二维码
        </Button>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { BasicModal, useModal } from '@/components/Modal';
  import { getBasicColumns } from './tableData.ts';
  import { createDetailsQrcode, list } from '@/api/institution/activityList.ts';
  import type { ListItem } from '@/api/institution/model/listModel';
  import Dictionary from '@/utils/dictionary';
  import { downloadByUrl } from '@/utils/file/download';
  import { Badge, Tag, Image, Button } from 'ant-design-vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const dicts = Dictionary.getLocalMulti(['activityStatus', 'publishStatus']);

  const getActivityStatusText = (status: number) => {
    return (
      dicts.activityStatus.find((v) => v.dictValue === status) || {
        dictLabel: '未知',
        dictType: 'default',
      }
    );
  };
  const getPublishStatusText = (status: number) => {
    return (
      dicts.publishStatus.find((v) => v.dictValue === status) || {
        dictLabel: '未知',
        dictType: 'default',
      }
    );
  };

  const qrCodeUrl = ref('');
  const openQrCodeModal = async (record: ListItem) => {
    openModal();
    qrCodeUrl.value = '';
    qrCodeUrl.value = await createDetailsQrcode(record.id);
  };

  const [register, { openModal }] = useModal();

  const [registerTable, { reload }] = useTable({
    title: '开启搜索区域',
    api: list,
    columns: getBasicColumns(),
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `title`,
          label: `活动名称`,
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '输入活动名称',
          },
        },
        {
          field: `orgName`,
          label: `发起单位`,
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '输入发起单位',
          },
        },
        {
          field: `createByName`,
          label: `活动创建人`,
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '输入活动创建人',
          },
        },

        {
          field: `publishStatus`,
          label: `发布状态`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: [{ dictLabel: '全部', dictValue: '' }, ...dicts.publishStatus],
            defaultValue: '',
            placeholder: '请选择发布状态',
          },
          colProps: {
            span: 6,
          },
        },
        {
          field: `activityStatus`,
          label: `活动状态`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: [{ dictLabel: '全部', dictValue: '' }, ...dicts.activityStatus],
            defaultValue: '',
            placeholder: '请选择活动状态',
          },
          colProps: {
            span: 6,
          },
        },
      ],
    },
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
    },
  });
</script>
